<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <div class="nav-header">
      <button class="nav-back-btn" @click="goBack">
        <i class="fas fa-chevron-left"></i>
      </button>
      <h1 class="nav-title">咨询预约记录</h1>
      <div class="nav-placeholder"></div>
      <!-- 用于保持标题居中 -->
    </div>

    <!-- 状态筛选 -->
    <div class="filter-section">
      <div class="filter-container">
        <button
          v-for="(filter, index) in filters"
          :key="index"
          :class="['filter-btn', { active: activeFilter === filter.value }]"
          @click="applyFilter(filter.value)"
        >
          {{ filter.label }}
        </button>
      </div>
    </div>

    <!-- 预约列表 -->
    <div class="appointment-list">
      <div
        v-for="appointment in appointments"
        :key="appointment.id"
        class="appointment-card fade-in"
      >
        <div class="card-header">
          <div class="consultant-info">
            <div class="consultant-avatar">
              {{ getAvatarText(appointment.ucName) }}
            </div>
            <div class="consultant-details">
              <h3 class="consultant-name">
                {{ appointment.ucName || "未命名" }}
              </h3>
              <p class="consultant-title">
                {{ appointment.appointmentTypeValue || "咨询" }}
              </p>
            </div>
          </div>
          <span class="case-id">{{ appointment.code || "无编号" }}</span>
        </div>

        <div class="card-content">
          <div class="session-info">
            <i class="fas fa-comment-dots"></i>
            <h4 class="session-title">
              {{ appointment.presentProblemValue || "暂无主题" }}
            </h4>
          </div>
          <div class="time-info">
            <i class="far fa-calendar"></i>
            <span class="session-time">{{
              formatDateTime(appointment.counseldate)
            }}</span>
          </div>
        </div>

        <div class="card-footer">
          <span :class="['status-badge', getStatusClass(appointment.status)]">
            {{ appointment.status || "未知状态" }}
          </span>
          <button class="action-btn" @click="viewDetail(appointment.id)">
            查看详情
          </button>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && appointments.length === 0" class="empty-container">
        <i class="fas fa-calendar-times"></i>
        <p>暂无预约记录</p>
      </div>

      <!-- 分页 -->
      <div v-if="total > pageSize" class="pagination-container">
        <button
          :disabled="pageNo <= 1"
          @click="changePage(pageNo - 1)"
          class="pagination-btn"
        >
          上一页
        </button>
        <span class="pagination-info"
          >第 {{ pageNo }} 页 / 共 {{ Math.ceil(total / pageSize) }} 页</span
        >
        <button
          :disabled="pageNo >= Math.ceil(total / pageSize)"
          @click="changePage(pageNo + 1)"
          class="pagination-btn"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { getIntakeByMobile } from "@/api/user";

export default {
  name: "AppointmentList",
  data() {
    return {
      loading: false,
      activeFilter: "",
      pageNo: 1,
      pageSize: 10,
      total: 0,
      filters: [
        { label: "全部记录", value: "" },
        { label: "待开始", value: "wait" },
        { label: "已完成", value: "finish" },
        { label: "已取消", value: "cancel" },
        { label: "本周", value: "thisWeek" },
        { label: "本月", value: "thisMonth" },
      ],
      appointments: [],
    };
  },
  mounted() {
    this.getAppointmentList();
  },
  methods: {
    getAppointmentList() {
      this.loading = true;
      let data = {
        mobile: "13671672601", // 这里应该是动态获取的用户手机号
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };

      // 只有当选择了筛选条件时才添加chooseData参数
      if (this.activeFilter) {
        data.chooseData = this.activeFilter;
      }

      getIntakeByMobile(data)
        .then((res) => {
          if (res.code === 200) {
            this.appointments = res.data.records || [];
            this.total = res.data.total || 0;
          } else {
            this.$message.error(res.message || "获取预约记录失败");
          }
        })
        .catch((error) => {
          console.error("获取预约记录失败:", error);
          this.$message.error("网络错误，请重试");
        })
        .finally(() => {
          this.loading = false;
        });
    },

    applyFilter(filter) {
      this.activeFilter = filter;
      this.pageNo = 1; // 重置到第一页
      this.getAppointmentList();
    },

    changePage(newPage) {
      this.pageNo = newPage;
      this.getAppointmentList();
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1);
      // 如果使用路由名称返回，可以使用：
      // this.$router.push({ name: 'Home' });
    },

    // 查看详情
    viewDetail(id) {
      if (!id) {
        this.$message.warning("无法获取预约详情");
        return;
      }

      // 跳转到详情页面，携带ID参数
      this.$router.push({
        path: "/yyjlxq",
        query: {
          id: id,
        },
      });

      // 或者使用路由名称（根据你的路由配置选择）
      // this.$router.push({
      //   name: 'AppointmentDetail',
      //   params: { id: id }
      // });
    },

    getAvatarText(name) {
      if (!name) return "用";
      // 取姓名的最后一个字符，如果姓名长度大于2，取后两个字符
      return name.length > 2 ? name.substring(name.length - 2) : name;
    },

    formatDateTime(dateTime) {
      if (!dateTime) return "时间待定";
      // 移除毫秒部分并格式化显示
      const formattedTime = dateTime.replace(/\.\d+$/, "");
      return formattedTime.replace(" ", " · ");
    },

    getStatusClass(status) {
      if (!status) return "status-pending";

      switch (status) {
        case "待开始":
          return "status-pending";
        case "已完成":
          return "status-completed";
        case "已取消":
          return "status-canceled";
        default:
          return "status-pending";
      }
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.page-container {
  max-width: 28rem;
  margin: 0 auto;
  background-color: #ffffff;
  min-height: 100vh;
  font-family: "Noto Sans SC", sans-serif;
  color: #1e293b;
}

/* 导航栏样式 */
.nav-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-back-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #f3f4f6;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back-btn:hover {
  background-color: #e5e7eb;
  transform: translateX(-2px);
}

.nav-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  flex: 1;
}

.nav-placeholder {
  width: 2.5rem; /* 与返回按钮宽度相同，保持对称 */
}

/* 筛选样式 */
.filter-section {
  padding: 1rem;
  background-color: #f8fafc;
}

.filter-container {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-btn.active {
  background-color: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

.filter-btn:hover:not(.active) {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

/* 预约卡片样式 */
.appointment-list {
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 2rem;
  background-color: #f8fafc;
  min-height: calc(100vh - 8rem);
}

.appointment-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #f1f5f9;
}

.appointment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.consultant-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.consultant-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  font-size: 0.875rem;
}

.consultant-details h3 {
  font-weight: 600;
  margin: 0;
  font-size: 1rem;
  color: #1f2937;
}

.consultant-details p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0.25rem 0 0 0;
}

.case-id {
  font-size: 0.75rem;
  background-color: #e0e7ff;
  color: #4f46e5;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.card-content {
  margin-bottom: 1rem;
}

.session-info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-info i {
  color: #6366f1;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.session-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
  color: #374151;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.time-info i {
  color: #6366f1;
  flex-shrink: 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-completed {
  background-color: #ecfdf5;
  color: #059669;
}

.status-pending {
  background-color: #fef3c7;
  color: #d97706;
}

.status-canceled {
  background-color: #fee2e2;
  color: #dc2626;
}

.action-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.action-btn:hover {
  background-color: #4338ca;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem;
  color: #6b7280;
  background-color: #ffffff;
  border-radius: 0.75rem;
  margin: 1rem 0;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem;
  color: #9ca3af;
  background-color: #ffffff;
  border-radius: 0.75rem;
  margin: 1rem 0;
  text-align: center;
}

.empty-container i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-container p {
  font-size: 1rem;
  margin: 0;
  color: #6b7280;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  margin-top: 1rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagination-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  background-color: white;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  color: #374151;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条样式 */
.filter-container::-webkit-scrollbar {
  height: 4px;
}

.filter-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.filter-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.filter-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .page-container {
    max-width: 100%;
  }

  .appointment-list {
    padding: 0 0.75rem;
  }

  .filter-section {
    padding: 0.75rem;
  }

  .nav-header {
    padding: 0.75rem;
  }
}
</style>
